<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
<!--    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">-->
    <link rel="stylesheet" href="manageSystem/layui/css/layui.css">
<!--    <script src="./layui-v2.6.8/layui/layui.js"></script>-->
    <!--
    <style>
        body {
            background-color: #eee;
        }
    </style>
    -->
    <style>
        #login-form {
            --primary: #4676CD;
            --primary-dark: #0B121B;
            --dark: #2B3044;
            --grey-dark: #404660;
            --grey: #8A91B4;
            --grey-light: #A6ACCD;
            --light: #BBC1E1;
            --pale: #ECEFFC;
            --white: #FFFFFF;
            --red: #F04949;
            width: 100%;
            max-width: 300px;
        }

        #login-form .logo {
            width: 44px;
            height: 44px;
            display: block;
            margin: 0 auto;
            fill: #0B121B;
        }

        #login-form h1 {
            margin: 24px 0;
            font-family: inherit;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: var(--dark);
        }

        #login-form .input {
            position: relative;
        }

        #login-form .input label {
            pointer-events: none;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;
            position: absolute;
            top: 8px;
            left: 0;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
            transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
            -webkit-transition: color .3s, -webkit-transform .3s;
            transition: color .3s, -webkit-transform .3s;
            transition: transform .3s, color .3s;
            transition: transform .3s, color .3s, -webkit-transform .3s;
            color: var(--label-color, var(--grey-light));
        }

        #login-form .input input {
            width: 100%;
            border-radius: 0;
            -webkit-appearance: none;
        }

        #login-form .input input:not(:placeholder-shown)+label,
        #login-form .input input:focus+label {
            --label-y: -17px;
            --label-scale: .8;
            --label-color: var(--grey);
        }

        /*文本布局*/
        #login-form .input.text {
            margin-bottom: 16px;
        }

        #login-form .input.text input {
            background: none;
            outline: none;
            border: none;
            color: var(--grey-dark);
            font-weight: 500;
            font-family: inherit;
            font-size: 13px;
            letter-spacing: .025em;
            line-height: 22px;
            caret-color: var(--primary);
            padding: 7px 0 5px 0;
            box-shadow: inset 0 -1px 0 0 var(--grey);
        }

        #login-form .input.password {
            height: 34px;
        }

        #login-form .input.password .dots {
            position: absolute;
            display: -webkit-box;
            display: flex;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
        }

        #login-form .input.password .dots i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--grey-dark);
            display: block;
            margin-right: 4px;
            -webkit-animation: var(--name, scale-in) 0.05s linear forwards;
            animation: var(--name, scale-in) 0.05s linear forwards;
        }

        #login-form .input.password .dots i.remove {
            --name: scale-out;
        }

        #login-form .input.password .dots i:nth-child(1) {
            --delay: 393.5ms;
        }

        #login-form .input.password .dots i:nth-child(2) {
            --delay: 387ms;
        }

        #login-form .input.password .dots i:nth-child(3) {
            --delay: 380.5ms;
        }

        #login-form .input.password .dots i:nth-child(4) {
            --delay: 374ms;
        }

        #login-form .input.password .dots i:nth-child(5) {
            --delay: 367.5ms;
        }

        #login-form .input.password .dots i:nth-child(6) {
            --delay: 361ms;
        }

        #login-form .input.password .dots i:nth-child(7) {
            --delay: 354.5ms;
        }

        #login-form .input.password .dots i:nth-child(8) {
            --delay: 348ms;
        }

        #login-form .input.password .dots i:nth-child(9) {
            --delay: 341.5ms;
        }

        #login-form .input.password .dots i:nth-child(10) {
            --delay: 335ms;
        }

        #login-form .input.password .dots i:nth-child(11) {
            --delay: 328.5ms;
        }

        #login-form .input.password .dots i:nth-child(12) {
            --delay: 322ms;
        }

        #login-form .input.password .dots i:nth-child(13) {
            --delay: 315.5ms;
        }

        #login-form .input.password .dots i:nth-child(14) {
            --delay: 309ms;
        }

        #login-form .input.password .dots i:nth-child(15) {
            --delay: 302.5ms;
        }


        #login-form .input.password .cursor {
            position: absolute;
            height: 15px;
            width: 1px;
            left: 0;
            top: 10px;
            background: var(--primary);
            opacity: 0;
            -webkit-transform: translateX(var(--cursor-x, 0));
            transform: translateX(var(--cursor-x, 0));
            -webkit-transition: -webkit-transform var(--cursor-duration, 0.1s);
            transition: -webkit-transform var(--cursor-duration, 0.1s);
            transition: transform var(--cursor-duration, 0.1s);
            transition: transform var(--cursor-duration, 0.1s), -webkit-transform var(--cursor-duration, 0.1s);
        }

        #login-form .input.password input {
            opacity: 0;
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
        }

        #login-form .input.password input:focus+label+.cursor {
            -webkit-animation: cursor 1s ease infinite;
            animation: cursor 1s ease infinite;
        }

        #login-form .input .line,
        #login-form .input .tick {
            pointer-events: none;
            position: absolute;
            left: var(--left, 0);
            bottom: var(--bottom, -10px);
            opacity: var(--opacity, 1);
            -webkit-transition: opacity 0s linear var(--tick-opacity-delay, 0.5s);
            transition: opacity 0s linear var(--tick-opacity-delay, 0.5s);
        }

        #login-form .input .line svg,
        #login-form .input .tick svg {
            stroke: var(--line-stroke, var(--grey));
            stroke-width: 1;
            fill: none;
            display: block;
            width: var(--width, 900px);
            height: var(--height, 22px);
            -webkit-transform: translateX(var(--x, var(--line-x, 0)));
            transform: translateX(var(--x, var(--line-x, 0)));
            -webkit-transition: stroke 0.3s, -webkit-transform var(--line-x-duration, 0s) ease;
            transition: stroke 0.3s, -webkit-transform var(--line-x-duration, 0s) ease;
            transition: transform var(--line-x-duration, 0s) ease, stroke 0.3s;
            transition: transform var(--line-x-duration, 0s) ease, stroke 0.3s, -webkit-transform var(--line-x-duration, 0s) ease;
        }

        #login-form .input .line {
            overflow: hidden;
            width: 100%;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        #login-form .input .tick {
            --left: 100%;
            --bottom: -1px;
            --width: 32px;
            --height: 28px;
            --x: -16px;
            --opacity: 0;
        }

        #login-form .input .tick svg {
            stroke: var(--tick-stroke, var(--grey));
            stroke-dasharray: 17 81;
            stroke-dashoffset: var(--tick-offset, 34px);
            -webkit-transition: stroke-dashoffset 0.5s ease var(--tick-delay, 0s), stroke 0.5s ease var(--tick-delay, 0s);
            transition: stroke-dashoffset 0.5s ease var(--tick-delay, 0s), stroke 0.5s ease var(--tick-delay, 0s);
        }

        /*按钮布局*/
        #login-form button {
            border: none;
            outline: none;
            padding: 10px 0;
            margin: 24px 0 0 0;
            border-radius: 7px;
            color: var(--c, #fff);
            /*width: 100%;*/
            width: 40%;
            font-size: 14px;
            line-height: 16px;
            position: relative;
            font-family: inherit;
            font-weight: 500;
            /*background: var(--b, var(--primary-dark));*/
            background: var(--b, var(--primary));
            -webkit-transition: color .3s, background .3s;
            transition: color .3s, background .3s;
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;

            /*display: inline-block;*/
        }

        #login-form button:disabled {
            --b: var(--pale);
            --c: var(--grey-light);
            cursor: not-allowed;
        }

        #login-form button svg {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -8px 0 0 -8px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 1.5;
            opacity: var(--svg-o, 0);
            -webkit-transform: translateY(var(--svg-y, -16px)) rotate(-90deg) scale(var(--svg-s, 0.7)) translateZ(0);
            transform: translateY(var(--svg-y, -16px)) rotate(-90deg) scale(var(--svg-s, 0.7)) translateZ(0);
            -webkit-transition: opacity .3s, -webkit-transform .3s;
            transition: opacity .3s, -webkit-transform .3s;
            transition: transform .3s, opacity .3s;
            transition: transform .3s, opacity .3s, -webkit-transform .3s;
        }

        #login-form button svg circle:first-child {
            stroke-opacity: .1;
        }

        #login-form button svg circle:last-child {
            stroke-dasharray: 38px;
            stroke-dashoffset: 114px;
        }

        #login-form button span {
            display: inline-block;
            vertical-align: top;
            line-height: 16px;
            opacity: var(--span-o, 1);
            -webkit-transform: translateY(var(--span-y, 0)) scale(var(--span-s, 1)) translateZ(0);
            transform: translateY(var(--span-y, 0)) scale(var(--span-s, 1)) translateZ(0);
            -webkit-transition: opacity .3s, -webkit-transform .3s;
            transition: opacity .3s, -webkit-transform .3s;
            transition: transform .3s, opacity .3s;
            transition: transform .3s, opacity .3s, -webkit-transform .3s;
        }

        #login-form.processing:not(.error):not(.success) button {
            --svg-y: 0;
            --svg-s: 1;
            --svg-o: 1;
            --span-y: 16px;
            --span-s: .7;
            --span-o: 0;
        }

        #login-form.processing:not(.error):not(.success) button svg circle:last-child {
            -webkit-animation: load 1.2s linear .3s;
            animation: load 1.2s linear .3s;
        }

        #login-form.processing.error {
            --line-x: -80%;
            --line-x-duration: 2s;
            --line-stroke: var(--red);
            --cursor-duration: 1s;
        }

        #login-form.processing.error .dots i {
            -webkit-animation: flip 0.4s linear var(--delay) forwards;
            animation: flip 0.4s linear var(--delay) forwards;
        }

        #login-form.processing.success .input .tick {
            --opacity: 1;
            --tick-offset: 98px;
            --tick-delay: .45s;
            --tick-opacity-delay: 0s;
            --tick-stroke: var(--primary);
            -webkit-animation: tick .4s linear forwards;
            animation: tick .4s linear forwards;
        }

        #login-form.processing.success .input .line {
            -webkit-animation: line .5s linear forwards;
            animation: line .5s linear forwards;
        }

        @-webkit-keyframes tick {

            70%,
            80% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
        }

        @keyframes tick {

            70%,
            80% {
                -webkit-transform: translateX(-10px);
                transform: translateX(-10px);
            }
        }

        @-webkit-keyframes line {
            70% {
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);
            }
        }

        @keyframes line {
            70% {
                -webkit-transform: scaleX(0.8);
                transform: scaleX(0.8);
            }
        }

        @-webkit-keyframes flip {
            25% {
                -webkit-transform: translateY(8px);
                transform: translateY(8px);
            }

            35% {
                -webkit-transform: translateY(12px);
                transform: translateY(12px);
            }

            65% {
                -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
            }

            100% {
                -webkit-transform: translateY(-12px) scale(0);
                transform: translateY(-12px) scale(0);
            }
        }

        @keyframes flip {
            25% {
                -webkit-transform: translateY(8px);
                transform: translateY(8px);
            }

            35% {
                -webkit-transform: translateY(12px);
                transform: translateY(12px);
            }

            65% {
                -webkit-transform: translateY(-4px);
                transform: translateY(-4px);
            }

            100% {
                -webkit-transform: translateY(-12px) scale(0);
                transform: translateY(-12px) scale(0);
            }
        }

        @-webkit-keyframes load {
            from {
                stroke-dashoffset: 114px;
            }

            to {
                stroke-dashoffset: 38px;
            }
        }

        @keyframes load {
            from {
                stroke-dashoffset: 114px;
            }

            to {
                stroke-dashoffset: 38px;
            }
        }

        @-webkit-keyframes scale-in {
            from {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            to {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes scale-in {
            from {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            to {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @-webkit-keyframes scale-out {
            from {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            to {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
        }

        @keyframes scale-out {
            from {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            to {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
        }

        @-webkit-keyframes cursor {
            50% {
                opacity: 1;
            }
        }

        @keyframes cursor {
            50% {
                opacity: 1;
            }
        }

        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }

        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: -webkit-box;
            display: flex;
            font-family: 'Inter', 'Inter UI', Arial;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            background: #F6F8FF;
        }
    </style>
</head>

<body>
    <!--导航栏-->
    <!--
    <header id="header">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="#" title="首页">首页</a></li>
            <li class="layui-nav-item layui-this"><a href="#" title="登录">登录</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child">
                    &lt;!&ndash; 二级菜单 &ndash;&gt;
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </header>
    -->


    <!--注册表单-->
    <form id="login-form" action="">
        <!--图标-->
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50.000000pt" height="37.500000pt"
             viewBox="0 0 1093.000000 865.000000" preserveAspectRatio="xMidYMid meet" class="logo">
            <metadata>
                Created by potrace 1.15, written by Peter Selinger 2001-2017
            </metadata>
            <g transform="translate(0.000000,865.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                <path d="M144 8576 c-6 -16 4874 -8475 4895 -8483 7 -3 17 0 22 8 5 8 9 694 9
       1587 0 1364 -2 1577 -15 1601 -18 36 -2575 4464 -2580 4469 -8 8 -2304 832
       -2318 832 -4 0 -10 -6 -13 -14z" />
                <path d="M9628 8177 c-631 -227 -1152 -417 -1158 -423 -5 -5 -590 -1015 -1300
       -2244 l-1290 -2234 0 -1588 c0 -1140 3 -1589 11 -1594 6 -3 17 0 24 7 27 27
       4885 8450 4885 8469 0 11 -6 20 -12 20 -7 -1 -529 -186 -1160 -413z" />
                <path d="M3007 8142 c-191 -191 -347 -350 -347 -355 0 -16 2794 -4197 2801
       -4190 16 19 2789 4184 2789 4191 0 4 -156 163 -347 354 l-348 346 -868 -521
       -869 -522 516 -3 c284 -1 516 -6 515 -10 0 -4 -50 -81 -112 -171 l-112 -165
       -520 -187 c-285 -103 -545 -193 -578 -200 -46 -9 -70 -9 -112 0 -30 7 -285 96
       -567 198 -282 102 -527 190 -545 196 -26 8 -51 39 -137 168 -58 88 -106 161
       -106 164 0 3 233 6 517 7 l516 3 -849 509 c-467 280 -858 515 -869 522 -19 13
       -45 -11 -368 -334z" />
            </g>
        </svg>



        <h1>欢迎注册</h1>


        <!-- 用户名 -->
        <div class="input text">
            <input type="text" id="username1" name="username" value="" placeholder=" " autocomplete="off">
            <label>用户名</label>
        </div>
        <!--密码-->
        <div class="input text">
            <input type="password" id="password" name="password" value="" placeholder=" " autocomplete="off">
            <label>密码</label>
        </div>
        <!--确认密码-->
        <div class="input text">
            <input type="password" value="" placeholder=" " autocomplete="off">
            <label>确认密码</label>
        </div>
        <!--手机号-->
        <div class="input text">
            <input type="text" id="phone" name="phone" value="" placeholder=" " autocomplete="off">
            <label>手机号</label>
        </div>
        <!--手机验证码-->
        <div class="input text" style="width: 50%;display: inline-block">
            <input type="text" id="phone-code" name="phone-code" value="" placeholder=" " autocomplete="off">
            <label>手机验证码</label>
        </div>
        <button style="margin-top: 0;margin-left: 8.7%">获取验证码</button>
        <!--邮件-->
        <div class="input text">
            <input type="email" id="email" name="email" value="" placeholder=" " autocomplete="off">
            <label>邮件</label>
        </div>
        <!--城市-->
        <!--
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        -->

        <!--立即注册-->
        <button type="submit" disabled style="margin-left: 2%">
            <svg viewBox="0 0 16 16">
                <circle stroke-opacity=".1" cx="8" cy="8" r="6"></circle>
                <circle class="load" cx="8" cy="8" r="6"></circle>
            </svg>
            <span>立即注册</span>
        </button>
        <!--重置-->
        <button type="reset" style="margin-left: 13%">
            <svg viewBox="0 0 16 16">
                <circle stroke-opacity=".1" cx="8" cy="8" r="6"></circle>
                <circle class="load" cx="8" cy="8" r="6"></circle>
            </svg>
            <span>重置</span>
        </button>
    </form>
    <!---->
    <!--
    <article style="margin-top: 30px;">
        <div class="layui-container">
            <div class="layui-col-lg6 layui-col-md12 layui-col-sm12 layui-col-lg-offset3">
                <div style="background-color: #fff; padding: 40px 20px; border-radius: 8px;">
&lt;!&ndash;                    <form class="layui-form" action="">&ndash;&gt;
                    <form id="login-form1" action="">
                        &lt;!&ndash;用户名&ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="请输入用户昵称"
                                    autocomplete="off" class="layui-input">
                                <label class="layui-anim-up">请输入用户名</label>
                            </div>
                            <div class="layui-form-mid layui-word-aux"><i style="color: red;">*</i>&nbsp;&nbsp;至少输入一个汉字
                            </div>
                        </div>
                        &lt;!&ndash; 手机号 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="phone" required lay-verify="required" placeholder="请输入手机号码"
                                    autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" id="phone-test"><i
                                    style="color: red;">*</i>&nbsp;&nbsp;请输入11位数号码
                            </div>
                        </div>
                        &lt;!&ndash; 邮件 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="email" name="email" required lay-verify="required" placeholder="请输入邮箱"
                                    autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" id="email-text"><i
                                    style="color: red;">*</i>&nbsp;&nbsp;请输入邮箱
                            </div>
                        </div>
                        &lt;!&ndash; 密码 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required"
                                    placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"><i
                                    style="color: red;">*</i>&nbsp;&nbsp;请输入6-11位英文或字母</div>
                        </div>
                        &lt;!&ndash; 确认密码 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" required lay-verify="required"
                                    placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"><i style="color: red;">*</i>&nbsp;&nbsp;请重新确认密码
                            </div>
                        </div>
                        &lt;!&ndash; 城市 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">所在城市</label>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required">
                                    <option value=""></option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                    <option value="2">广州</option>
                                    <option value="3">深圳</option>
                                    <option value="4">其他</option>
                                </select>
                            </div>
                            <div class="layui-form-mid layui-word-aux"><i style="color: red;">*</i>&nbsp;&nbsp;请选择你所在的城市
                            </div>
                        </div>
                        &lt;!&ndash; 出生日期 &ndash;&gt;
                        <div class="layui-form-item">
                            <label class="layui-form-label">出生日期</label>
                            <div>
                                <div class="layui-input-inline">
                                    &lt;!&ndash; 注意：这一层元素并不是必须的 &ndash;&gt;
                                    <input type="date" class="layui-input" id="test1">
                                </div>
                            </div>
                            <div class="layui-form-mid layui-word-aux">&nbsp;&nbsp;&nbsp;请输入出生年月日</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即注册</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </article>
    -->
    <!-- 获取日期 -->
<!--    <script src="/static/build/layui.js"></script>-->
    <script src="manageSystem/js/jquery.js"></script>
    <script src="manageSystem/layui/layui.js"></script>
    <!--服务器路径配置-->
    <script src="./js/myWebConfig.js"></script>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
            });
        });
    </script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <script>
        // 电话号码验证
        let phone = document.querySelector('[name=phone]');
        let phone_test = document.querySelector('#phone-test');
        var reg1 = /^1[3|4|5|7|8]\d{9}$/;
        phone.onblur = function () {
            if (reg1.test(this.value)) {
                console.log("输入正确");
                phone_test.innerHTML = '<i style="color: green;">√&nbsp;&nbsp;输入格式正确！</i>';
            } else {
                console.log("输入错误");
                phone_test.innerHTML = '<i style="color: red;">×&nbsp;&nbsp;请输入11位手机号</i>';
            }
        }
        //邮箱验证
        let email = document.querySelector('[name=email]');
        let email_text = document.querySelector('#email-text');
        var reg2 = /^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/;
        email.onblur = function () {
            if (reg2.test(this.value)) {
                console.log("输入正确");
                email_text.innerHTML = '<i style="color: green;">√&nbsp;&nbsp;输入格式正确！</i>';
            } else {
                console.log("输入错误");
                email_text.innerHTML = '<i style="color: red;">×&nbsp;&nbsp;请输入完整的邮箱</i>';
            }
        }
    </script>
    <!--表单样式-->
    <script>
        // correct password is `password` lol

        const $ = (s, o = document) => o.querySelector(s);
        const $$ = (s, o = document) => o.querySelectorAll(s);

        const login = $('#login-form');
        const passwordContainer = $('.password', login);
        const password = $('input', passwordContainer);
        const passwordList = $('.dots', passwordContainer);
        const submit = $('button', login);

        password.addEventListener('input', e => {
            password.value = password.value.slice(0, 18);
            const count = password.value.length - $$('i', passwordList).length;
            for (let i = 0; i < count; i++) {
                passwordList.appendChild(document.createElement('i'));
            }
            submit.disabled = !password.value.length;
            passwordContainer.style.setProperty('--cursor-x', password.value.length * 10 + 'px');
        });

        let pressed = false;

        password.addEventListener('keydown', e => {

            if (pressed || login.classList.contains('processing') || (password.value.length > 18 && e.keyCode != 8 && e.keyCode != 13)) {
                e.preventDefault();
            }
            pressed = true;

            setTimeout(() => pressed = false, 20);

            // 按下了退格键（<-）
            if (e.keyCode == 8) {
                let last = $('i:last-child', passwordList);
                if (last !== undefined && last) {
                    last.classList.add('remove');
                    setTimeout(() => last.remove(), 20);
                }
            }

        });

        password.addEventListener('select', function () {
            this.selectionStart = this.selectionEnd;
        });

        /*按下了提交按钮*/
        login.addEventListener('submit', e => {
            e.preventDefault();
            if (!login.classList.contains('processing')) {
                login.classList.add('processing');
                setTimeout(() => {
                    let ajaxData = ""
                    // ajax 请求。
                    // 当点击登录按钮是，会自动发送 ajax 请求。
                    jQuery.ajaxSetup({async: false});    // 取消 ajax 异步。
                    // jQuery.post("http://localhost:8080/login",{username:jQuery("#username").val(),password:jQuery("#password").val(),code:jQuery("#code").val()},function (data) {
                    jQuery.post(webUrl+"/login",{username:jQuery("#username").val(),password:jQuery("#password").val(),code:jQuery("#code").val()},function (data) {
                        // 回传的是 json 格式的 string 需要进行 json 转换。
                        ajaxData = JSON.parse(data)
                        // alert(data)
                        // console.log("data的值！！！")
                        // console.log(typeof data)
                        // console.log(typeof ajaxData)
                        console.log(ajaxData)
                    })

                    // 判断密码是否正确。
                    // 密码：123456
                    // let cls = password.valu`e == '123456' ? 'success' : 'error';
                    let cls = ajaxData.code == 200 ? 'success' : 'error';
                    jQuery.ajaxSetup({async: false});    // 恢复 ajax 异步。
                    // 显示用户名
                    // console.log($(".input.text input").value);
                    // 显示密码
                    // console.log(password.value);
                    // 查看类型 和 转换为json格式。
                    // console.log(ajaxData)
                    // console.log(JSON.parse(ajaxData))
                    // console.log(typeof ajaxData)


                    login.classList.add(cls);
                    //密码错误。样式。【清除密码】
                    if (cls == 'error') {
                        // 数据库回传的信息
                        layui.use("layer", function () {
                            // 提示显示错误信息。
                            layer.msg(ajaxData.data.content, {icon: 0});
                        })


                        setTimeout(() => {
                            login.classList.remove('processing', cls);
                            if (cls == 'error') {
                                password.value = '';
                                passwordList.innerHTML = '';
                                submit.disabled = true;

                                // layui.use("layer", function () {
                                //     // 提示显示错误信息。
                                //     layer.msg("服务器出问题啦 111111111！", {icon: 0});
                                // })
                            }
                        }, 2000);
                        setTimeout(() => {
                            if (cls == 'error') {
                                passwordContainer.style.setProperty('--cursor-x', 0 + 'px');
                            }
                            // console.log("ajaxData的值")
                            // console.log(ajaxData)
                            // console.log(ajaxData.toString())
                            if (ajaxData.toString() == "") {
                                layui.use("layer", function () {
                                    // 提示显示错误信息。
                                    layer.msg("请连接网络", {icon: 0});
                                })
                            }
                        }, 600);

                    } else {
                        layui.use("layer", function () {
                            // 提示显示错误信息。
                            layer.msg(ajaxData.data.content, {icon: 6});
                        })
                        //登录成功
                        setTimeout(() => {
                            // alert('登录成功！');
                            // 跳转到后台管理页面。
                            window.location.href=ajaxData.data.page;
                        }, 1200);
                    }

                }, 1500);

            }

        });

    </script>
</body>

</html>